{layout name="layout2" /}
<style>
    .div-flex {
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .layui-form-label {
        width: 100px;
    }

    .width-160 {
        width: 200px;
    }

    .layui-table th {
        text-align: center;
    }

    .table-margin {
        margin-left: 50px;
        margin-right: 50px;
        text-align: center;
    }

    .image {
        height: 80px;
        width: 80px;
    }
    .layui-form-select .layui-input{
        width:460px;
    }
    input{
        border:1px solid #e8e8e8;
        padding:10px;
    }
    .tips{color:red;}
</style>

<div class="layui-card-body" >
    <!--用户信息-->
    <div class="layui-form" lay-filter="layuiadmin-form-express" id="layuiadmin-form-express" >
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>选择信息</legend>
            </fieldset>
        </div>

        <div class="layui-form-item div-flex select-express">
            <label class="layui-form-label "><span class="tips">*</span>选择用户:</label>
            <div>
                <select name="user_id" lay-verify="required" id="user_id"  lay-filter="select-check-user" lay-search="">
                    <option value="">请搜索</option>
                    {foreach $user_list as $index => $item}
                     <option value="{$item.id}" >{$item.name??''}({$item.mobile??''})</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item div-flex select-express">
            <label class="layui-form-label"><span class="tips">*</span>站点名称:</label>
            <div >
                <select name="site_id" id="site_id">
                    <option value="">请选择站点</option>
                    {foreach $bottle_site_list as $val}
                    <option value="{$val.id}">{$val.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item div-flex">
            <label class="layui-form-label "><span class="tips">*</span>选择商品:</label>
            <div>
                <style>
                    .goods-item{
                        background:#e8e8e8;
                        padding:10px 20px;
                        display: flex;
                        justify-content: space-between;
                        align-content: center;
                        margin-top:10px;
                    }
                    .goods{
                        display: flex;
                        justify-content: space-between;
                        align-content: center;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                    }
                    .goods-left{
                        flex-grow: 1;
                    }
                    .goods-right{
                        margin-left:10px;
                        flex-grow: 2;
                    }
                    .goods-number{
                        flex-grow: 1;
                        margin-left:10px;
                    }
                    .goods-number input{
                        width:100px;
                    }
                </style>

                {foreach $goods_list as $index => $item}
                   <div class="goods-item" style="">
                       <input lay-filter="checkbox-check-good" type="checkbox" name="goods_id[]"   value="{$item.id}" title="{$item.id}" >
                        <div class="goods">
                            <div class="goods-left">
                                <img src="{$item.image}" width="80" />
                            </div>
                            <div class="goods-right">
                                <p>{$item.name}</p>
                                <p>{$item.description}</p>
                                <p>{$item.price}</p>
                            </div>
                            <div class="goods-number">
                                <p>
                                   数量： <input type="number" min="1" max="100" name="number[]" lay-filter="express" value="1" >
                                </p>
                            </div>
                        </div>
                   </div>


                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>配送信息</legend>
            </fieldset>
        </div>
        <div class="layui-form-item div-flex">
            <label class="layui-form-label ">收货人:</label>
            <div class="width-160">
                <input type="text" name="name" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">手机号:</label>
            <div class="width-160">
                <input type="text" name="mobile" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">收货地址:</label>
            <div class="width-160">
                <input type="text" name="address" lay-filter="express" value="" >
                <input type="hidden" name="address_detail" lay-filter="express" value="" >
            </div>
        </div>
        <div class="layui-form-item div-flex">
            <label class="layui-form-label ">所在楼层:</label>
            <div class="width-160">
                <input type="text" name="floor" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">是否有电梯:</label>
            <div class="width-160">
                <input type="text" name="if_elevator" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">用户经纬度:</label>
            <div class="width-160">
                <input type="text" name="latitude" lay-filter="express" value="" >
            </div>
        </div>
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>下单金额</legend>
            </fieldset>
        </div>
        <div class="layui-form-item div-flex">
            <label class="layui-form-label ">钢瓶押金:</label>
            <div class="width-160">
                <input type="text" name="bottle_deposit" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">钢瓶租金:</label>
            <div class="width-160">
                <input type="text" name="settle_bottle_rent" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">楼层费:</label>
            <div class="width-160">
                <input type="text" name="floor_amount" lay-filter="express" value="" >
            </div>
        </div>
        <div class="layui-form-item div-flex">
            <label class="layui-form-label ">气价:</label>
            <div class="width-160">
                <input type="text" name="bottle_amount" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">商品增购:</label>
            <div class="width-160">
                <input type="text" name="good_price" lay-filter="express" value="" >
            </div>
            <label class="layui-form-label ">实际付款金额:</label>
            <div class="width-160">
                <input type="text" name="order_amount" lay-filter="express" value="" >
            </div>
        </div>
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>用户留言</legend>
            </fieldset>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">用户留言:</label>
            <div class="layui-input-block">
                <textarea name="user_remark" class="layui-input" style="width:100%;height:60px;" id="user_remark" lay-verify="user_remark" ></textarea>
            </div>
        </div>
        <div class="layui-form-item div-flex ">
            <div class="layui-input-block ">
                <input type="button" class="layui-btn layui-btn-sm layui-btn-normal width_160" lay-submit lay-filter="send" id="send" value="下单">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary width_160 " id="back">返回</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作

    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'jquery', 'like', 'form'], function () {
        var $ = layui.$
            , form = layui.form;
        var like = layui.like;

        //主图放大
        $(document).on('click', '.image-show', function () {
            var src = $(this).attr('src');
            like.showImg(src,600);
        });


        form.on('radio(express)', function (data) {
            var checked = data.value;
            if (checked == 1) {
                $('.select-express').show();
            } else {
                $('.select-express').hide();
            }
        });
        form.on('checkbox(switchTest)', function (data) {
            console.log( data );　　//打印当前选择的信息
            if( data.elem.checked){　　　　　　//判断当前多选框是选中还是取消选中
                alert('当前选中');
            }
            var value = data.value;   //获取选中的value值
        });
        // 选中商品触发
        //监听多选框点击事件  主要是通过 lay-filter="switchTest"  来监听
        form.on('checkbox(checkbox-check-good)', function (data) {
            console.log( data );　　//打印当前选择的信息
            if( data.elem.checked){　　　　　　//判断当前多选框是选中还是取消选中
                // alert('当前选中');
            }
            var value = data.value;   //获取选中的value值
            // 获取数量

            //创建一个空数组
            var number_arr = [];
            // //index下标 element 当前选中的元素
            // $('input[name^="number"]').each(function(index,element){
            //     //压入数组
            //     number_arr[index] = $(this).val();
            // });
            // console.log(number_arr);
            //创建一个空数组
            var good_id_arr = [];
            //index下标 element 当前选中的元素
            $('input[name^="goods_id"]').each(function(index,element){
                if ($(this).prop('checked') ==true) {
                    // console.log($(this).val());
                    good_id_arr[index] = $(this).val();
                }
            });
            console.log(good_id_arr);
            var numberObj = $('input[name="number[]"]')
            console.log("numberObj",numberObj)
            // 获取勾选产品和数量拼接json
            var postData = []
            good_id_arr.forEach((item,index)=>{
                console.log("--",item,index,numberObj[index].value)
                // 获取对应的值
                number_arr[index] = $(this).val();
                postData.push({'good_id':item,'number':numberObj[index].value})
            })
            console.log("postData",postData)
            var user_id = $("#user_id").val()
            console.log(user_id)
            if(user_id==undefined || user_id==''){
                layer.alert("请先选择用户，否则无法计算租金和楼层费！")
                return
            }
            like.ajax({
                url: '{:url("order/countPrice")}'
                , data: {"data":postData,'user_id':user_id}
                , type: 'post'
                , success: function (res) {
                    if (res.code == 1) {
                        console.log(res.data)
                        $("input[name=bottle_deposit]").val(res.data.bottle_deposit)
                        $("input[name=settle_bottle_rent]").val(res.data.settle_bottle_rent)
                        $("input[name=floor_amount]").val(res.data.floor_amount)
                        $("input[name=bottle_amount]").val(res.data.bottle_amount)
                        $("input[name=good_price]").val(res.data.good_price)
                        $("input[name=order_amount]").val(res.data.order_amount)
                    }
                },
            });
        });

        // select 事件
        form.on('select(select-check-user)', function(data){
                var elem = data.elem; // 获得 select 原始 DOM 对象
                var value = data.value; // 获得被选中的值
            //得到数据
            like.ajax({
                url: '{:url("order/firstUser")}'
                , data: {id:value}
                , type: 'post'
                , success: function (res) {
                    if (res.code == 1) {
                        console.log(res.data)

                        $("input[name=name]").val(res.data.name)
                        $("input[name=mobile]").val(res.data.mobile)
                        $("input[name=address]").val(res.data.address)
                        $("input[name=address_detail]").val(res.data.address_detail)
                        $("input[name=floor]").val(res.data.floor)
                        $("input[name=if_elevator]").val(res.data.if_elevator)
                        $("input[name=latitude]").val(res.data.latitude)
                        // layui.layer.msg(res.msg, {
                        //     offset: '15px'
                        //     , icon: 1
                        //     , time: 1000
                        // },function () {
                        //     var index = parent.layer.getFrameIndex(window.name);
                        //     parent.location.reload();
                        //     parent.layer.close(index);
                        // });
                    }
                },
            });
                var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
                layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
       });
        function select_check_user(data){
            alert(data)
        }
        $('#back').click(function () {
            var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
            parent.layer.close(index);
            parent.layui.table.reload('order-lists');
            return true;
        });


        //发货
        form.on('submit(send)', function (data) {
            var field = data.field;
            console.log(field)
            like.ajax({
                url: '{:url("order/deliveryHandle")}'
                , data: field
                , type: 'post'
                , success: function (res) {
                    if (res.code == 1) {
                        layui.layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        },function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.location.reload();
                            parent.layer.close(index);
                        });
                    }
                },
            });
        })

    });
</script>